<template>
	<view class="ucenter-page">
		<u-navbar title-size="36"  height="42" :border-bottom="false" title="提现记录"></u-navbar>
		<view class="search-bar">
			<view class="search-inner">
				<image src="../../static/images/search-2.png" mode="" class="search-icon"></image>
				<input type="text" value="" v-model="search" placeholder="输入线索号" class="ui-input"
					placeholder-style="color:#9C9C9C;" @input="input" />
				<image src="../../static/images/clear.png" class="clear" mode="" v-if="clear" @click="inputClear">
				</image>
			</view>
		</view>
		<view class="dropdown-nav">
			<u-dropdown height="90" inactive-color="#606366" active-color="#A2C833" menu-icon="arrow-down-fill"
				menu-icon-size="0">
				<u-dropdown-item v-model="value1" title="2021.09" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="佣金类型" :options="options2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="content">
			<view class="total">
				<view class="total-item">20笔<text>¥20000</text></view>
			</view>
			<view class="u-cells">
				<view class="u-cell" :class="{disabled:res.state=='已到账'}" v-for="(res, index) in list" :key="index">
					<view class="u-cell-top">
						<view class="u-cell-title flex_bd ellipsis">{{res.title}}</view>
						<view class="price">¥{{res.price}}</view>
					</view>
					<view class="u-cell-tags">
						<view class="tag" v-for="(item, index) in res.tags" :key="index">{{item}}</view>
					</view>
					<view class="u-cell-bt">
						<view class="u-cell-time">{{res.time}}</view>
						<view class="u-cell-state" :class="{failed:res.state=='提现失败'}">{{res.state}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20" width="92%">
			<view class="popup-content">
				<view class="popup-head">
					<view class="popup-title">
						<image src="../../static/images/failed.png" mode="" class="failed-icon"></image>提现失败
					</view>
					<image src="../../static/images/close.png" class="close" mode="" @click="show = false"></image>
				</view>
				<view class="popup-body">
					<view class="popup-info">
						<view class="item">交易单号：2021110365432112</view>
						<view class="item">失败原因：当前账户未完成实名认证</view>
					</view>
					<view class="popup-kefu">- 请致电联系官方客服<text class="tel">400-1234-9876</text> -</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				list: [{
					title: '线索 UB20091910',
					price: 2000,
					tags: ['设备成交', 'ZE205E-10', 'LA010201'],
					time: '2021-05-19',
					state: '待处理'
				}, {
					title: '线索 UB20091910',
					price: 2000,
					tags: ['累计成交额', '好友分红'],
					time: '2021-05-19',
					state: '提现失败'
				}, {
					title: ' 一次性奖励',
					price: 5000,
					tags: ['累计成交额', '好友分红'],
					time: '2021-05-19',
					state: '已到账'
				}],
				clear: false,
				search: '',
				show: true
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			input() {
				this.clear = true
			},
			inputClear() {
				this.search = '';
				this.clear = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.search-bar {
		padding: 16rpx 32rpx 20rpx;
		background-color: #fff;

		.search-inner {
			position: relative;

			.search-icon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 32rpx;
				top: 50%;
				margin-top: -20rpx;
			}

			.ui-input {
				height: 72rpx;
				background-color: #F3F4F6;
				border-radius: 36rpx;
				padding-left: 80rpx;
				font-size: 28rpx;
			}

			.clear {
				width: 40rpx;
				height: 40rpx;
				display: block;
				position: absolute;
				right: 16rpx;
				top: 50%;
				margin-top: -20rpx;
				z-index: 11;
			}
		}
	}

	.dropdown-nav {
		background-color: #fff;

		/deep/ .u-dropdown__menu__item__arrow {
			width: 24rpx;
			height: 24rpx;
			background: url(../../static/images/down-arrow.png) no-repeat;
			background-size: contain;
		}
	}

	.content {
		padding: 32rpx;

		.total {
			display: flex;
			margin-left: -16rpx;
			margin-bottom: 32rpx;

			.total-item {
				font-size: 24rpx;
				color: #9C9C9C;
				padding: 0 16rpx;
				position: relative;

				text {
					color: #313A41;
					margin-left: 4rpx;
				}
			}

			.total-item:after {
				position: absolute;
				content: '';
				width: 2rpx;
				height: 16rpx;
				background: #CCCCCC;
				right: 0;
				top: 50%;
				margin-top: -8rpx;
			}

			.total-item:last-child::after {
				width: 0;
			}

		}
	}

	.u-cell {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding: 32rpx;

		.u-cell-top {
			display: flex;
			align-items: center;

			.u-cell-title {
				font-size: 28rpx;
				color: #383842;
			}

			.price {
				font-size: 36rpx;
				color: #FE6714;
				margin-left: 60rpx;
			}
		}

		.u-cell-tags {
			margin-bottom: 20rpx;

			.tag {
				display: inline-block;
				font-size: 22rpx;
				color: #A2C833;
				border: 2rpx solid #A2C833;
				height: 36rpx;
				background: rgba(162, 200, 51, 0.08);
				padding: 0 8rpx;
				border-radius: 6rpx;
				line-height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.u-cell-bt {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.u-cell-time {
				font-size: 24rpx;
				color: #9C9C9C;
			}

			.u-cell-state {
				font-size: 24rpx;
				color: #606366;
			}

			.failed {
				color: #FD523B;
			}
		}
	}

	.disabled.u-cell {
		.u-cell-top {
			.price {
				color: #9C9C9C;
				opacity: 0.5;
			}
		}

		.u-cell-bt {
			.u-cell-state {
				color: #9C9C9C;
				opacity: 0.5;
			}
		}
	}

	.popup-content {
		.popup-head {
			position: relative;
			padding: 52rpx 24rpx 24rpx;

			.popup-title {
				font-size: 40rpx;
				color: #303337;
				font-weight: 600;
				display: flex;
				justify-content: center;
				line-height: 64rpx;

				.failed-icon {
					width: 76rpx;
					height: 80rpx;
				}
			}

			.close {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 24rpx;
				top: 24rpx;
			}

		}

		.popup-body {
			padding: 0 80rpx 52rpx;
			.popup-info {
				font-size: 32rpx;
				color: #666666;
				line-height: 52rpx;
				margin-bottom: 48rpx;
				padding-left: 8rpx;
			}
			
			.popup-kefu{
				font-size: 28rpx;
				color: #303337;
				line-height: 52rpx;
				
				.tel{
					color: #A2C833;
					padding: 0 8rpx;
				}
			}
		}
	}
</style>
